<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<script src="js/jquery-1.11.1.js"></script>
		<!-- 二.定义样式 复杂型页面根据页面三个简易结构，3次样式引用 -->
		<link rel="stylesheet" href="css/header.css">
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/footer.css">
		<!-- 增加一个样式 统一去掉页面默认效果-->
		<link rel="stylesheet" href="css/public.css">
		<!-- 智能硬件区域 kid图片路径转移至html   background-image在css失效 -->
		<style>
			/* 吸顶灯效果：定死页面顶部效果 */
			.active{
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 1;
				text-align: center;
			}
		</style>
		<script>
			$(function(){
				// JQ操作  滚动下拉条  超过200px  吸顶灯定死页面
				//①固定值：获取到达吸顶灯位置的偏移量
				var so=$("#mi").offset().top;
				//$window 监听窗口的时间：滚动，窗口视图大小
				//scroll() 监听页面滚动事件
				$(window).scroll(function(){
					//超过200px：  动态值》固定值200   条件满足  页面吸顶灯
					//②获取页面滚动值 动态值
					var st=$(window).scrollTop()
					if(st>so){
						$("#mi").addClass("active");
					}else{
						$("#mi").removeClass("active");
					}
				});
			});
		</script>
	</head>
	<body>
		
		<!-- 一.设计小米整体简易结构：页头、主体、页尾
		    使用结构化标记：header、main、footer
		 -->
		<header>
			<!-- 控制页面：中控区 -->
			<div id="wrapper">
				<div class="head_left">
					<ul>
						<li><a href="#">小米网</a></li>
						<li><a href="#">MIUI</a></li>
						<li><a href="#">米聊</a></li>
						<li><a href="#">游戏</a></li>
						<li><a href="#">多看阅读</a></li>
						<li><a href="#">云服务</a></li>
						<li><a href="#">小米移动版</a></li>
						<li><a href="#">问题反馈</a></li>
						<li><a href="#" class="c">Select Region</a></li>
					</ul>
				</div>
				<div class="head_right">
					<ul>
						<!-- 精灵图使用  icon图标
						 1.使用文本样式元素补位：i，b，s，u
						 2.使用矢量图，精灵图.png[不失真]
						 优点：避免多次命名，减少服务器请求
						 3.如果使用补元素，必须内边距【撑大】
						 4.定位
						 -->
						<li class="li_right" ><i class="shop"></i><a href="#" class="fix">购物车(0)</a></li>
							<div class="car">购物车中还没有商品，赶紧选购吧！</div>
						
						<li><a href="#">注册</a></li>
						<li><a href="#">登录</a></li>
					</ul>
				</div>
				<div class="head_right"></div>
			</div>
		</header>
		<main>
			<!-- 第一部分 左边 -->
			<div id="mi">
					<div class="LOGO"><img src="img/LOGO.png"><img src="img/donghua.gif"></div>
					<ul>
						<li><a href="#">小米盒子</a></li>
						<li><a href="#">红米</a></li>
						<li><a href="#">平板</a></li>
						<li><a href="#">电视</a></li>
						<li><a href="#">盒子</a></li>
						<li><a href="#">路由器</a></li>
						<li><a href="#">智能硬件</a></li>
						<li><a href="#">服务</a></li>
						<li><a href="#">社区</a></li>
					</ul>
					</aside>
					<!-- 第二部分 右边 -->
					<div class="search">
						<div class="search_box"><img src="img/search.png"></div>
					    <span>平衡车</span>
					    <span>小米手机4c</span>
					</div>
					<div class="clearfix"></div>
				</div>
			<!-- 面包屑导航 nav结构化元素“导航 -->
			<!-- 左栏区 -->
			<aside>
							  <!-- 弹出框，模式：div+别名 -->
				       <ul class="ul_sidebar">
						   <div class="out">
							<div style="float:left; margin-right:23px;">
								<img src="img/phone_img.png">
								</div>
							<div  style="float:left; margin-right:40px;">
								<a>小米手机5</a><a>小米手机4S</a><a>小米Note</a><a>小米手机4</a><a>小米手机4c</a><a>红米Note3</a>
								</div>
							<div  style="float:left; padding-top:5px; margin-right:34px;">
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>
							</div>
							<div style="float:left; margin-right:15px;">
								<img src="img/phone_img01.png">
								</div>
							<div  style="float:left; margin-right:40px;">
								<a>红米手机3</a><a>小米平板2</a><a>电信版</a><a>合约机</a><a>对比手机</a><a>电话卡</a>
								</div>
							<div  style="float:left; padding-top:5px; margin-right:34px;">
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>
							    <div class="xuangou"><a href="#">选购</a></div>   
						   </div>
						   </div>
				           <li>手机 平板 电话卡<span>></span></li>
				           <li>电视 盒子<span>></span></li>
				           <li>路由器 智能硬件<span>></span></li>
				           <li>移动电源 插线板<span>></span></li>
				           <li>耳机 音箱<span>></span></li>
				           <li>电池 存储卡<span>></span></li>
				           <li>保护套 后盖<span>></span></li>
				           <li>贴膜 其他配件<span>></span></li>
				           <li>米兔 服装<span>></span></li>
				           <li>箱包 其他周边<span>></span></li>
				       </ul>
			</aside>
				   <figure>
				   	<!-- 3.类似于html固定写法【小心起名与轮播图框架冲突】 -->
				   <!-- 3.1 main 样式为主 引入轮播 -->
				   <!-- 轮播图 figue结构化元素：图片，图表2，代码片段 -->
				   <div class="main"></div>
				   <!-- 3.2 id=“animation” js行为为主：轮播行为 -->
				       <div id="animation"></div>
				   	<!-- class="container" 样式为主：开辟轮播空间 -->
				       	<div class="lunbotu">
				   			<!-- 轮播效果：延迟加载 -->
				   			<div class="banner" id="lazyload">
				   				<ul>
				   					<li><img src="img/banner01.jpg" alt="" height="461px"/></li>
				   					<li><img src="img/banner02.jpg" alt="" height="461px"/></li>
				   					<li><img src="img/banner03.jpg" alt="" height="461px"/></li>
				   					<li><img src="img/banner04.jpg" alt="" height="461px"/></li>
				   					<li><img src="img/banner05.jpg" alt="" height="461px"/></li>
				   				</ul>
				   			</div>
				   		</div>
				   <!-- 引入jquery封装轮播框架.js文件 -->
				   <script src="js/highlight.pack.js"></script>
				   <script src="js/jquery-1.11.1.js"></script>
				   <script src="js/jquery.terseBanner.min.js"></script>
				   <script src="js/script.js"></script>
				   	</figure>
			<!-- 左栏弹出效果 -->
			<script>
						 /* 左栏实现：1. 添加事件 切换效果   */
						 $("aside ul.ul_sidebar li").hover(function(){
						 	$("aside ul.ul_sidebar div.out").css("display","block");
						 },function(){
						 	$("aside ul.ul_sidebar div.out").css("display","none");
						 });
						 
						 $("header div#wrapper div.head_right ul li.li_right").hover(function(){
						 	$("header div#wrapper div.head_right ul div.car").css("display","block");
						 },function(){
						 	$("header div#wrapper div.head_right ul div.car").css("display","none");
						 });
			</script>
			
			<!-- 四张图片：产品区 -->
			<div class="subnav">
				<div class="left_nav">
					<img src="img/left.png" width="230px" height="170px">
					</div>
			    <div class="box1"><a href="#"><img src="img/subnav_icon01.png" width="270px" height="170px"></a></div>
			    <div class="box2"><a href="#"><img src="img/subnav_icon02.jpg" width="270px" height="170px"></a></div>
			    <div class="box3"><a href="#"><img src="img/subnav_icon03.png" width="270px" height="170px"></a></div>
			</div>
			<!-- ------------------------------------------------------------------------------------------------------------ -->
			<!-- 背景阴影 -->
			<div class="main_shadow"></div>
			<!-- 明星单品 -->
			<div id="fish">
				<div class="xiaomi_star">小米明星单品</div>
				<div class="jiantou">></div>
				<div class="jiantou1"><</div>
				<div class="container_star3">
					<dl>
						<dt>
						 	<img src="img/chazuo.png" alt="">
						</dt>
						 	<dd class="product_">小米智能插座&nbsp;基础版</dd>
						 	<dd class="product_content">手机远程遥控，让普通电器变智能</dd>
						 	<dd class="product_price">49元</dd>
						</dl>
				</div>
				<!-- 2 -->
				<div class="container_star2">
					<dl>
						<dt>
							<img src="img/dianfanbao_icon03.jpg" alt="">
						</dt>
							<dd class="product_">小米空气净化器2&nbsp;</dd>
							<dd class="product_content">净化能力高达310m3/h</dd>
							<dd class="product_price">699元</dd>
					</dl>
				</div>
				<!--3  -->
				<div class="container_star3">
					<dl>
						<dt>
							<img src="img/chaban.png" alt="">
						</dt>
							<dd class="product_">小米智能插线板</dd>
							<dd class="product_content">手机远程控制家中电器，智能节电</dd>
							<dd class="product_price">69元</dd>
					</dl>
				</div>
				<!--4  -->
				<div class="container_star4">
					<dl>
						<dt>
							<img src="img/erji.png" alt="">
						</dt>
							<dd class="product_">小米圈铁耳机</dd>
							<dd class="product_content">动圈+动铁，双发声单元</dd>
							<dd class="product_price">69元</dd>
					</dl>
				</div>
				<!-- 5 -->
				<div class="container_star5">
					<dl>
						<dt>
							<img src="img/miwifi_icon03.jpg" alt="">
						</dt>
							<dd class="product_">小米路由器 青春版</dd>
							<dd class="product_content">将高性能路由器，凝聚于掌心大小</dd>
							<dd class="product_price">79元</dd>
					</dl>
				</div>
			</div>
			<!-- 智能硬件区域 -->
			<div>
				<div class="hardware-box">
					<div class="hardware">
				    	智能硬件
				        <img style="float:right;" src="img/hardware_morebtn.png">
				        <a href="#">查看全部</a>
				    </div>
				    <div class="kidwatch">
				    	<p style="font-size:24px; font-weight:normal; margin-top:57px;">米兔儿童电话手表</p>
				        <p style="font-size:16px; margin-top:14px; color:#333;">安全防走失，宝贝的贴身护卫</p>
				        <p style="margin-top:34px; font-size:30px; color:#00a8ff; font-family:Century Gothic;">299<a style="font-size:14px;">元</a></p>
				    </div>
				    <div class="hardware-right">
				    	<div class="hardwareTopbox">
				            <div class="content" style="background:#fff url(img/haraware_tizhongcheng.png) center 115px no-repeat;">
				                <p class="ziti">小米体重秤</p>	
				                <p style=" margin-top:10px; color:#b0b0b6;">高精度压力传感器，手机管理全家健康</p>
				                <p style="color:#ff6709; margin-top:15px;">99元</p>
				            </div>
				            <div class="content" style="background:#fff url(img/haraware_luyouqi.png) center 20px no-repeat;">
				                <p class="ziti">小米路由器3</p>	
				                <p style=" margin-top:10px; color:#b0b0b6;">更安全更稳定，安全发售</p>
				                <p style="color:#ff6709; margin-top:15px;">149元</p>
				            </div>
				            <div class="content" style="background:#fff url(img/haraware_shouhuan.png) center 20px no-repeat;">
				                <p class="ziti">小米手环 光感版</p>	
				                <p style=" margin-top:10px; color:#b0b0b6;">实时监测心率，科学运动</p>
				                <p style="color:#ff6709; margin-top:15px;">99元</p>
				            </div>
				            <div class="content" style="margin-right:0; background:#fff url(img/haraware_anfang.png) center 20px no-repeat;">
				                <p class="ziti">小米智能安防套装</p>	
				                <p style=" margin-top:10px; color:#b0b0b6;">智能警戒，为您的家增添一份安心</p>
				                <p style="color:#ff6709; margin-top:15px;">699元</p>
				            </div>
				         </div>
				         <div class="hardwareBottomBOX">
				            <div class="content" style="background:#fff url(img/haraware_xiaoyi.png) center 20px no-repeat;">
				                <p class="ziti">小米运动相机</p>	
				                <p style=" margin-top:10px; color:#b0b0b6;">边玩边录边拍，手机随时分享</p>
				                <p style="color:#ff6709; margin-top:15px;">399元</p>
				            </div>
				            <div class="content" style="background:#fff url(img/haraware_xieya.png) center 20px no-repeat;">
				                <p class="ziti">iHealth智能血压计（蓝牙版）</p>	
				                <p style=" margin-top:10px; color:#b0b0b6;">送给父母的健康礼物</p>
				                <p style="color:#ff6709; margin-top:15px;">199元</p>
				            </div>
				            <div class="content" style="background:#fff url(img/haraware_shexiangtou.png) center 20px no-repeat;">
				                <p class="ziti">小米智能摄像机 夜视版</p>	
				                <p style=" margin-top:10px; color:#b0b0b6;">能看能听能说，手机远程观看</p>
				                <p style="color:#ff6709; margin-top:15px;">149元</p>
				            </div>
				            <div class="content" style="margin-right:0; background:#fff url(img/haraware_light.png) center 34px no-repeat;">
				                <p class="ziti">Yeelight床头灯</p>	
				                <p style=" margin-top:10px; color:#b0b0b6;">触摸式操作，给卧室1600万种颜色</p>
				                <p style="color:#ff6709; margin-top:15px;">699元</p>
				            </div>
				          </div>
				    </div>
				    <div class="clearfix"></div>
				</div>
			</div>
			<!-- --------------------------------------------------------------------------------- -->
			<!-- 搭配和配件与周边 -->
			<!--搭配-->
			<div class="position">
			 <div class="dapei-box">
			 	<div class="dapei">
			     	搭配
			         <ul>
			         	<li class="current">热门</li>
			             <li>耳机音箱</li>
			             <li>电源</li>
			             <li style="margin-right:0;">电池储存卡</li>
			         </ul>
			     </div>
			     <div class="dapeiLeftBox">
			     	<div class="content">
			         	<img src="img/dapei_icon01.png">
			         </div>
			     	<div class="content">
			         	<img src="img/dapei_icon02.png">
			         </div>
			     </div>
			     <div class="dapeiRightBox">
			     	<div class="TopBox">
			             <div class="content" style="background:#fff url(img/dapei_icon03.png) center 46px no-repeat;">
			                 <p class="ziti">小米路由器3</p>	
			                 <p style=" margin-top:10px; color:#b0b0b6;">更安全更稳定，安全发售</p>
			                 <p style="color:#ff6709; margin-top:15px;">149元</p>
			             </div>
			             <div class="content" style="background:#fff url(img/dapei_icon04.png) center 46px no-repeat;">
			                 <p class="ziti">小米手环 光感版</p>	
			                 <p style=" margin-top:10px; color:#b0b0b6;">实时监测心率，科学运动</p>
			                 <p style="color:#ff6709; margin-top:15px;">99元</p>
			             </div>
			             <div class="content" style=" background:#fff url(img/dapei_icon05.png) center 100px no-repeat;">
			                 <p class="ziti">小米智能安防套装</p>	
			                 <p style=" margin-top:10px; color:#b0b0b6;">智能警戒，为您的家增添一份安心</p>
			                 <p style="color:#ff6709; margin-top:15px;">699元</p>
			             </div>
			             <div class="content" style="margin-right:0;background:#fff url(img/dapei_icon06.png) center 46px no-repeat;">
			                 <p class="ziti">小米运动相机</p>	
			                 <p style=" margin-top:10px; color:#b0b0b6;">边玩边录边拍，手机随时分享</p>
			                 <p style="color:#ff6709; margin-top:15px;">399元</p>
			             </div>
			         </div>
			         <div class="BottomBox">
			             <div class="content" style="background:#fff url(img/dapei_icon07.png) center 49px no-repeat;">
			                 <p class="ziti">小米智能摄像机 夜视版</p>	
			                 <p style=" margin-top:10px; color:#b0b0b6;">能看能听能说，手机远程观看</p>
			                 <p style="color:#ff6709; margin-top:15px;">149元</p>
			             </div>
			             <div class="content" style="background:#fff url(img/dapei_icon08.png) center 55px no-repeat;">
			                 <p class="ziti">小米智能摄像机 夜视版</p>	
			                 <p style=" margin-top:10px; color:#b0b0b6;">能看能听能说，手机远程观看</p>
			                 <p style="color:#ff6709; margin-top:15px;">149元</p>
			             </div>
			             <div class="content" style="background:#fff url(img/dapei_icon09.png) center 58px no-repeat;">
			                 <p class="ziti">小米智能摄像机 夜视版</p>	
			                 <p style=" margin-top:10px; color:#b0b0b6;">能看能听能说，手机远程观看</p>
			                 <p style="color:#ff6709; margin-top:15px;">149元</p>
			             </div>
			             <div class="content" style="margin-right:0; background-color:#f5f5f5;" >
			                 <div class="content-top" style="margin-bottom:14px;"><img src="img/content-top_icon01.png"></div>
			                 <div class="content-top"><img src="img/content-top_icon02.png"></div>
			             </div>
			         </div>
			     </div>
			         
			 </div>
			 
			  <!--周边-->
			 <div class="dapei-box">
			 		<div class="dapei">
			     	周边
			         <ul>
			         	<li class="current">热门</li>
			             <li>服装</li>
			             <li>米兔</li>
			             <li>生活周边</li>
			             <li style="margin-right:0;">箱包</li>
			         </ul>
			     </div>
			     <div class="dapeiLeftBox">
			     	<div class="content">
			         	<img src="img/peijian_icon01.png">
			         </div>
			     	<div class="content">
			         	<img src="img/peijian_icon02.png">
			         </div>
			     </div>
			     <div class="dapeiRightBox">
			     	<div class="TopBox">
			             <div class="content" style="background:#fff url(img/peijian_icon03.png) center 36px no-repeat;">
			         	<p class="ziti">小米金属鼠标垫 小号</p>	
			     		<p style="color:#ff6709; margin-top:10px;">49元</p>
			         	<p style=" margin-top:15px; color:#b0b0b6;">6483人评价</p>
			             
			         </div>
			         <div class="content" style="background:#fff url(img/peijian_icon04.png) center 36px no-repeat;">
			         	<p class="ziti">小米皮质记事本</p>	
			     		<p style="color:#ff6709; margin-top:10px;">19元</p>
			         	<p style=" margin-top:15px; color:#b0b0b6;">3050人评价</p>
			         </div>
			         <div class="content" style=" background:#fff url(img/peijian_icon05.png) center 36px no-repeat;">
			         	<p class="ziti">小米LED随身灯 增强版</p>	
			     		<p style="color:#ff6709; margin-top:10px;">19.9元</p>
			         	<p style=" margin-top:15px; color:#b0b0b6;">5.6万人评价</p>
			         </div>
			         <div class="content" style="margin-right:0;background:#fff url(img/peijian_icon06.png) center 36px no-repeat;">
			         	<p class="ziti">手机支架 小蜜蜂</p>	
			     		<p style="color:#ff6709; margin-top:10px;">19元</p>
			         	<p style=" margin-top:15px; color:#b0b0b6;">6.9万人评价</p>
			         </div>
			         </div>
			         <div class="BottomBox">
			            <div class="content" style="background:#fff url(img/peijian_icon07.png) center 45px no-repeat;">
			                 <p class="ziti">小米防尘塞 MI标</p>	
			                 <p style="color:#ff6709; margin-top:10px;">3.9元</p>
			                 <p style=" margin-top:15px; color:#b0b0b6;">5.6万人评价</p>
			             </div>
			             <div class="content" style="background:#fff url(img/peijian_icon08.png) center 45px no-repeat;">
			                 <p class="ziti">小米智能摄像机 夜视版</p>	
			                 <p style="color:#ff6709; margin-top:10px;">149元</p>
			                 <p style=" margin-top:15px; color:#b0b0b6;">8461人评价</p>
			             </div>
			             <div class="content" style="background:#fff url(img/peijian_icon09.png) center 45px no-repeat;">
			                 <p class="ziti">小米电源线收纳盒</p>	
			                 <p style="color:#ff6709; margin-top:10px;">39元</p>
			                 <p style=" margin-top:15px; color:#b0b0b6;">8461人评价</p>
			             </div>
			             <div class="content" style="margin-right:0; background-color:#f5f5f5;" >
			                 <div class="content-top" style="margin-bottom:14px;"><img src="img/peijian_icon10.png"></div>
			                 <div class="content-top"><img src="img/content-top_icon02.png"></div>
			             </div>
			           </div>
			     </div>
			         
			 </div>
			 
			  <!--配件-->
			<div class="dapei-box">
			 
			     <div class="dapei">
			     	配件
			         <ul>
			         	<li class="current">热门</li>
			             <li>保护套</li>
			             <li>后盖</li>
			             <li>贴膜</li>
			             <li style="margin-right:0;">其他配件</li>
			         </ul>
			     </div>
			     <div class="dapeiLeftBox">
			     	<div class="content">
			         	<img src="img/zhoubian_icon01.png">
			         </div>
			     	<div class="content">
			         	<img src="img/zhoubian_icon02.png">
			         </div>
			     </div>
			     <div class="dapeiRightBox">
			     	<div class="TopBox">
			             <div class="content" style="background:#fff url(img/zhoubian_icon03.png) center 47px no-repeat;">
			         	<p class="ziti">小米自拍杆</p>	
			     		<p style="color:#ff6709; margin-top:10px;">49元</p>
			         	<p style=" margin-top:15px; color:#b0b0b6;">6.4万人评价</p>
			         </div>
			         <div class="content" style="background:#fff url(img/zhoubian_icon04.png) center 47px no-repeat;">
			         	<p class="ziti">小米手机5 钢化膜（0.22mm）</p>	
			     		<p style="color:#ff6709; margin-top:10px;">29元</p>
			         	<p style=" margin-top:15px; color:#b0b0b6;">1万人评价</p>
			         </div>
			         <div class="content" style=" background:#fff url(img/zhoubian_icon05.png) center 47px no-repeat;">
			         	<p class="ziti">红米手机Note3 钢化膜（0.22mm）</p>	
			     		<p style="color:#ff6709; margin-top:10px;">699元</p>
			         	<p style=" margin-top:15px; color:#b0b0b6;">5.6万人评价</p>
			         </div>
			         <div class="content" style="margin-right:0;background:#fff url(img/zhoubian_icon06.png) center 47px no-repeat;">
			         	<p class="ziti">小米Note 标准贴膜（2片装）</p>	
			     		<p style="color:#ff6709; margin-top:10px;">19元</p>
			         	<p style=" margin-top:15px; color:#b0b0b6;">2.1万人评价</p>
			         </div>
			         </div>
			         <div class="BottomBox">
			            <div class="content" style="background:#fff url(img/zhoubian_icon07.png) center 47px no-repeat;">
			                 <p class="ziti">小米随身WIFI</p>	
			                 <p style="color:#ff6709; margin-top:10px;">19.9元</p>
			                 <p style=" margin-top:15px; color:#b0b0b6;">30.1万人评价</p>
			             </div>
			             <div class="content" style="background:#fff url(img/zhoubian_icon08.png) center 47px no-repeat;">
			                 <p class="ziti">小米百变随身杯</p>	
			                 <p style="color:#ff6709; margin-top:10px;">39元</p>
			                 <p style=" margin-top:15px; color:#b0b0b6;">1.2万人评价</p>
			             </div>
			             <div class="content" style="background:#fff url(img/zhoubian_icon09.png) center 47px no-repeat;">
			                 <p class="ziti">小米手机5 硅胶保护套</p>	
			                 <p style="color:#ff6709; margin-top:10px;">69元</p>
			                 <p style=" margin-top:15px; color:#b0b0b6;">215人评价</p>
			             </div>
			             <div class="content" style="margin-right:0; background-color:#f5f5f5;" >
			                 <div class="content-top" style="margin-bottom:14px;"><img src="img/zhoubian_icon10.png"></div>
			                 <div class="content-top"><img src="img/content-top_icon02.png"></div>
			             </div>
			           </div>
			     </div>
			 </div>
			 <!--分类-->
			 <div class="classify-box">
			 	<div class="classify">内容</div>
			     <div class="content" style="border-top:1px solid #ffac13;">
			     	<ul>
			         	<li style="font-size:16px; color:#ffac13; margin-bottom:25px;">图书</li>
			             <li style=" margin-bottom:10px;"><a href="#" style="font-size:20px; color:#333;">阿弥陀佛，么么哒</a></li>
			             <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:5px;">大冰新书，12个不舍得读完的、暖心</li>
			             <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:20px;">的，真实的江湖故事</li>
			             <li>9.99元</li>
			             <li><img src="img/classify_icon01.png" style="margin-left:auto; margin-right:auto; margin-top:32px;"></li>
			         </ul>
			     </div>
			     <div class="content" style="border-top:1px solid #83c44e;">
			     	<ul>
			         	<li style="font-size:16px; color:#83c44e; margin-bottom:25px;">主题</li>
			             <li style=" margin-bottom:10px;"><a href="#" style="font-size:20px; color:#333;">主题市场</a></li>
			             <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:5px;">众多个性主题、百变锁屏与自由桌面</li>
			             <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:20px;">让你的手机与众不同！</li>
			             <li>MIUI</li>
			             <li><img src="img/classify_icon02.png" style="margin-left:auto; margin-right:auto; margin-top:15px;"></li>
			         </ul>
			     </div>
			     <div class="content" style="border-top:1px solid #e53935;">
			     	<ul>
			         	<li style="font-size:16px; color:#e53935; margin-bottom:25px;">游戏</li>
			             <li style=" margin-bottom:10px;"><a href="#" style="font-size:20px; color:#333;">米柚手游模拟器</a></li>
			             <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:5px;"></li>
			             <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:39px;">在电脑上玩遍小米所有手游</li>
			             <li>免费</li>
			             <li><img src="img/classify_icon03.png" style="margin-left:auto; margin-right:auto; margin-top:47px;"></li>
			         </ul>
			     </div>
			     <div class="content" style="margin-right:0; border-top:1px solid #2196f3;">
			     	<ul>
			         	<li style="font-size:16px; color:#2196f3; margin-bottom:25px;">应用</li>
			             <li style=" margin-bottom:10px;"><a href="#" style="font-size:20px; color:#333;">2015年度应用</a></li>
			             <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:39px;">精彩世界，尽情下载</li>
			            
			             <li>免费</li>
			             <li><img  style="margin-left:auto; margin-right:auto; margin-top:46px;" src="img/classify_icon04.png"></li>
			         </ul>
			     </div>
			 </div>video-box
			 
			 <!--视频-->
			 <div class="video-box">
			 	
			 	<div class="video">
			     		视频
			     	 <img style="float:right;" src="img/hardware_morebtn.png">
			         <a href="#" style="float:right; font-size:18px; margin-right:10px; color:#333;">查看更多</a>
			     </div>
			     <div class="content">
			     	<img class="play" src="img/video_play.png">
			     	<img src="img/video_icon01.jpg">
			     	 <h1>笑喷了，沈腾爆笑出演，6集联播</h1>
			          <h2>小米Max沈腾爆笑预告全集</h2>
			     </div>
			     <div class="content">
			     	<img class="play" src="img/video_play.png">
			    		<img src="img/video_icon02.jpg">
			         <h1>小米2016春季新品发布会</h1>
			          <h2>小米5 十余项黑科技亮相</h2>
			     </div>
			     <div class="content">
			     	<img class="play" src="img/video_play.png">
			     	<img class="icon" src="img/video_icon03.jpg">
			         <h1>15秒了解小米5 有多快</h1>
			          <h2>华少用超快语速告诉你小米5 到底有多快</h2>
			     </div>
			     <div class="content" style="margin-right:0;">
			     	<img class="play" src="img/video_play.png">
			     	<img src="img/video_icon04.jpg">
			     		<h1>《去探索》 小米年度品牌视频</h1>
			          	<h2>与小米一起探索黑科技</h2>
			     </div>
			     <div class="clearfix"></div>
			 </div>
			 <div class="clearfix"></div>
			 </div>
		</main>
		<footer> 
			<div class="footer_container">
				<div class="column_top">
					<img style="float:left; margin-right:5px;" src="img/safe_icon01.png">
					<h3>1小时快修服务</h3>
				</div>
				<div class="column_top">
					<img style="float:left; margin-right:5px;" src="img/safe_icon01.png">
					<h3>7天无理由退货</h3>
				</div>
				<div class="column_top">
					<img style="float:left; margin-right:5px;" src="img/safe_icon01.png">
					<h3>满15元包邮</h3>
				</div>
				<div class="column_top">
					<img style="float:left; margin-right:5px;" src="img/safe_icon01.png">
					<h3>520余家售后网点</h3>
				</div>
				<!-- 帮助中心区 -->
				<div class="column">
					<h3>帮助中心</h3>
					<ul>
						<li><a href=""></a>购物指南</li>
						<li><a href=""></a>支付方式</li>
						<li><a href=""></a>配送方式</li>
					</ul>
				</div>
				<div class="column">
					<h3>服务支持</h3>
					<ul>
						<li><a href=""></a>售后政策</li>
						<li><a href=""></a>自助服务</li>
						<li><a href=""></a>相关下载</li>
					</ul>
				</div>
				<div class="column">
					<h3>线下门店</h3>
					<ul>
						<li><a href=""></a>小米之家</li>
						<li><a href=""></a>服务网点</li>
						<li><a href=""></a>线下专区</li>
					</ul>
				</div>
				<div class="column">
					<h3>关于小米</h3>
					<ul>
						<li><a href=""></a>了解小米</li>
						<li><a href=""></a>加入小米</li>
						<li><a href=""></a>联系我们</li>
					</ul>
				</div>
				<div class="column">
					<h3>关于我们</h3>
					<ul>
						<li><a href=""></a>新浪微博</li>
						<li><a href=""></a>小米部落</li>
						<li><a href=""></a>官方微信</li>
					</ul>
				</div>
				<div class="column">
					<h3>特色服务</h3>
					<ul>
						<li><a href=""></a>防伪查询</li>
						<li><a href=""></a>F码通道</li>
						<li><a href=""></a>小米移动</li>
					</ul>
				</div>
				<!-- 客服信息栏 -->
				<div class="column contact_column">
					<h3>400-100-5678</h3>
					<p>周一至周日 8:00-18:00</p>
					<p>（仅收市话费）</p>
					<a href="#">24小时客服在线</a>
				</div>
				</div>
			</div>
			
			<!-- 合作 -->
			<div class="team-box">
				<div class="team">
			    	<div class="logo"><img src="img/team_logo.png"></div>
			        <div style="width:880px; float:left; margin-bottom:30px;">
			        	<p><a href="#">小米网</a><a href="#">MIUI</a><a href="#">米聊</a><a href="#">多看书城</a><a href="#">小米路由器</a><a href="#">视频电话</a>
			        	<a href="#">小米后院</a><a href="#">小米天猫店</a><a href="#">小米淘宝直营店</a><a href="#">小米网盟</a><a href="#">问题反馈</a>
			            <a href="#">Select Region</a>
			        </p>
			        <p style="margin-left:5px;">©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 违法和不良信息举报
			        	电话：185-0130-1238</p>
			        <p style="margin-left:5px;">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
			        <div class="clearfix"></div>
			        </div>
			        <div class="safe">
			        	<img style="float:left; margin-right:5px;" src="img/safe_icon01.png">
			            <span>诚信网站师范企业</span>
			            <img style="float:left; margin-right:5px;" src="img/safe_icon02.png">
			            <span>可信网站信用评价</span>
			            <img style="float:left; margin-right:5px;" src="img/safe_icon03.png">
			            <span style="margin-right:0;">网上交易保障中心</span>
			            <div class="clearfix"></div>
			        </div>
			    </div>
			    <div class="clearfix"></div>
			    <div class="word">探索黑科技，小米为发烧而生</div>
			</div>
			<div style="height:20px; background-color:#fafafa;"></div>
		</footer>
	</body>
</html>
